<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :md="6" :sm="8">
                        <a-form-item label="年度">
                            <!-- <a-date-picker v-model="queryParam.shijian" /> -->
                            <a-date-picker style="width:100%" :open='yearShowOne' @openChange="openChangeOne"
                                @panelChange="panelChangeOne" mode="year" format="YYYY" type="date"
                                :default-value="moment(new Date(), 'YYYY')" v-model="queryParam.sbnd" suffix-icon=" "
                                placeholder="年份" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="8">
                        <a-form-item label="成果类别">
                            <a-select v-model="queryParam.flid" placeholder="请选择成果类别" @change="handleSelectFz">
                                <a-select-option v-for="(item, index) in cxjSbList" :key="index" :value="item.fl_bh">{{
                                    item.fl_mc }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="8">
                        <a-form-item label="复审分组">
                            <a-select v-model="queryParam.fzid" placeholder="请选择复审分组">
                                <a-select-option v-for="item in fsfzlist" :key="item.id" :value="item.id">
                                    {{ item.fs_fz_mc }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="8">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button type="primary" @click="searchReset" icon="reload"
                                style="margin-left: 8px">重置</a-button>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <!-- 查询区域-END -->
        <!-- table区域-begin -->
        <div>
            <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns"
                :dataSource="dataSource" :pagination="ipagination" :loading="loading" @change="handleTableChange">

                <template slot="htmlSlot" slot-scope="text">
                    <div v-html="text"></div>
                </template>
                <template slot="imgSlot" slot-scope="text">
                    <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
                    <img v-else :src="getImgView(text)" height="25px" alt=""
                        style="max-width:80px;font-size: 12px;font-style: italic;" />
                </template>
                <template slot="fileSlot" slot-scope="text">
                    <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
                    <a-button v-else :ghost="true" type="primary" icon="download" size="small"
                        @click="downloadFile(text)">
                        下载
                    </a-button>
                </template>
                <template slot="pfzt" slot-scope="text, record">
                    <span v-if="record.pfzt == '1'" style="color: #48862C">已提交</span>
                    <span v-else style="color: #F83F3D">未提交</span>
                </template>
                <span slot="action" slot-scope="text, record">
                    <a @click="printlist(record)">打印</a>
                    <a v-if="record.pfzt == '1'">
                        <img style="width:18px;height:18px;margin-left:12px;" @click="ratingPreview(record)"
                            src="@/assets/img/yulan.png" alt="">
                    </a>
                </span>

            </a-table>
        </div>
        <div id="print_table_list">
            <h2 style="text-align:center;font-size: 20px;">
                专家复审评分汇总表
            </h2>
            <p style="text-align:right;">
                <span style="margin-right:20px;">评审专家：{{ zjxm }}</span>
                <span>日期：{{ nowDate }}</span>
            </p>
            <a-table ref="table" size="middle" :scroll="{ x: 1020 }" bordered rowKey="cxj_xmbh" :columns="print_columns"
                :dataSource="print_dataSource" :pagination="false" class="print_table_list">
            </a-table>
            <p style="text-align:right;margin-right:100px;padding-top:10px;">评审专家签字：</p>
        </div>
        <cxj-jscs-fz-xm-modal ref="modalForm" @ok="modalFormOk"></cxj-jscs-fz-xm-modal>
        <!-- <a v-print="'#print_table_list'" id="printbtn"></a> -->
        <a v-print="printObj" id="printbtn"></a>
        <!-- pdf -->
        <view-pdf :params="pafParams" :showPdf="showpdf" path="cxjFsPfJs"></view-pdf>
    </a-card>
</template>

<script>
import viewPdf from '@/views/cxj/viewPdf'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import CxjJscsFzXmModal from './modules/CxjJscsFzXmModal'
import { filterObj } from '@/utils/util';
import qs from 'qs';
import moment from 'moment'
import {
    getAction
} from "@/api/manage"
import {
    sysCxjFlCxjsbList,
    cxjfsFspfListZjZg,
} from "@/api/api"
export default {
    name: 'CxjFsZjpfqkZg',
    mixins: [mixinDevice],
    components: {
        CxjJscsFzXmModal,
        viewPdf
    },
    data() {
        return {
            pafParams: {},
            showpdf: false,
            description: '专家评审情况-职工',
            // 表头
            columns: [
                {
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: "center",
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '成果类别',
                    align: "center",
                    dataIndex: 'fl_id',
                    customRender: (id) => {
                        const typeMap = {
                            '11': '技术成果',
                            '21': '系统成果',
                            '31': '标准成果',
                            '41': '信息化成果',
                            '51': '专利成果',
                            '61': '职工成果'
                        };
                        return typeMap[id] || '';
                    }
                },
                {
                    title: '分组名称',
                    align: "center",
                    dataIndex: 'fs_fz_mc'
                },
                {
                    title: '专家姓名',
                    align: "center",
                    dataIndex: 'zj_xm'
                },
                {
                    title: '手机号',
                    align: "center",
                    dataIndex: 'zj_sj'
                },
                {
                    title: '总任务',
                    align: "center",
                    dataIndex: 'zsl'
                },
                {
                    title: '已打分',
                    align: "center",
                    dataIndex: 'ypf'
                },
                {
                    title: '未打分',
                    align: "center",
                    dataIndex: 'wpf',
                },
                {
                    title: '评分状态',
                    align: "center",
                    dataIndex: 'pfzt',
                    scopedSlots: { customRender: 'pfzt' },
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: "center",
                    fixed: "right",
                    width: 147,
                    scopedSlots: { customRender: 'action' }
                }
            ],
            url: {
                list: "/cxj/cxjFsFz/cxjfs_fsZjPsqk_zg",
                cxjfs_fzlist: "/cxj/cxjFsFz/cxjfs_fzlist",
            },
            cxjSbList: [],
            fsfzlist: [],
            /* 列表参数开始 */
            queryParam: {},
            dictOptions: {},
            superFieldList: [],
            fileStatus: "",
            selectedRowKeys: [],
            selectionRows: [],
            loading: false,
            isorter: {
                column: 'createTime',
                order: 'desc',
            },
            dataSource: [],
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            /* 列表参数结束 */
            /* 年份参数开始 */
            yearShowOne: false,
            sbnd: moment(new Date()).format('YYYY'),
            /* 年份参数结束 */
            print_columns: [
                {
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: '4%',
                    customCell: () => {
                        return {
                            style: {
                                'min-width': '40px',
                            },
                        };
                    },
                    align: "center",
                    // fixed: 'left',
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '答辩时间',
                    align: "center",
                    dataIndex: 'dbsj',
                    width: '10%',
                    customCell: () => {
                        return {
                            style: {
                                'min-width': '80px',
                            },
                        };
                    },
                },
                {
                    title: '答辩序号',
                    align: "center",
                    dataIndex: 'xm_xh',
                    width: '5%',
                    scopedSlots: { customRender: '' },
                    customCell: () => {
                        return {
                            style: {
                                'min-width': '80px',
                            },
                        };
                    },
                },
                {
                    title: '成果编号',
                    align: "center",
                    dataIndex: 'cxj_xmbh',
                    width: '6%',
                    customCell: () => {
                        return {
                            style: {
                                'min-width': '80px',
                            },
                        };
                    },
                },
                {
                    title: '审查意见',
                    align: 'center',
                    children: [
                        {
                            title: '技术创新性',
                            align: "center",
                            width: '5%',
                            customCell: () => {
                                return {
                                    style: {
                                        'min-width': '100px',
                                    },
                                };
                            },
                            children: [{
                                title: "20分",
                                align: "center",
                                width: '5%',
                                customCell: () => {
                                    return {
                                        style: {
                                            'min-width': '100px',
                                        },
                                    };
                                },
                                dataIndex: "fs_cxx",
                                scopedSlots: { customRender: 'fs_cxx' }
                            }]
                        },
                        {
                            title: '技术先进性',
                            align: "center",
                            width: '5%',
                            customCell: () => {
                                return {
                                    style: {
                                        'min-width': '100px',
                                    },
                                };
                            },
                            children: [{
                                title: "20分",
                                align: "center",
                                width: '5%',
                                customCell: () => {
                                    return {
                                        style: {
                                            'min-width': '100px',
                                        },
                                    };
                                },
                                dataIndex: "fs_xjx",
                                scopedSlots: { customRender: 'fs_xjx' }
                            }]
                        },
                        {
                            title: '使用范围',
                            align: "center",
                            width: '6%',
                            customCell: () => {
                                return {
                                    style: {
                                        'min-width': '100px',
                                    },
                                };
                            },
                            children: [{
                                title: "20分",
                                align: "center",
                                width: '6%',
                                customCell: () => {
                                    return {
                                        style: {
                                            'min-width': '100px',
                                        },
                                    };
                                },
                                dataIndex: "fs_tgjz",
                                scopedSlots: { customRender: 'fs_tgjz' }
                            }]
                        },
                        {
                            title: '经济效益',
                            align: "center",
                            width: '6%',
                            customCell: () => {
                                return {
                                    style: {
                                        'min-width': '100px',
                                    },
                                };
                            },
                            children: [{
                                title: "10分",
                                align: "center",
                                width: '6%',
                                customCell: () => {
                                    return {
                                        style: {
                                            'min-width': '100px',
                                        },
                                    };
                                },
                                dataIndex: "fs_jjxy",
                                scopedSlots: { customRender: 'fs_jjxy' }
                            }]
                        },
                        {
                            title: '实施效果',
                            width: '6%',
                            customCell: () => {
                                return {
                                    style: {
                                        'min-width': '100px',
                                    },
                                };
                            },
                            children: [{
                                title: "20分",
                                align: "center",
                                width: '6%',
                                customCell: () => {
                                    return {
                                        style: {
                                            'min-width': '100px',
                                        },
                                    };
                                },
                                dataIndex: "fs_ssxg",
                                scopedSlots: { customRender: 'fs_ssxg' }
                            }]
                        },
                        {
                            title: '汇报质量',
                            align: "center",
                            width: '6%',
                            customCell: () => {
                                return {
                                    style: {
                                        'min-width': '100px',
                                    },
                                };
                            },
                            children: [{
                                title: "10分",
                                align: "center",
                                width: '6%',
                                customCell: () => {
                                    return {
                                        style: {
                                            'min-width': '100px',
                                        },
                                    };
                                },
                                dataIndex: "fs_xmcs",
                                scopedSlots: { customRender: 'fs_xmcs' }
                            }]
                        },
                        {
                            title: '总分',
                            align: "center",
                            width: '5%',
                            customCell: () => {
                                return {
                                    style: {
                                        'min-width': '60px',
                                    },
                                };
                            },
                            dataIndex: 'fs_zongfen',
                            sorter: (a, b) => b.fs_zongfen - a.fs_zongfen,
                        },
                        {
                            title: '评审意见',
                            dataIndex: 'fs_pingshenyj',
                            scopedSlots: { customRender: 'fs_pingshenyj' }
                        },
                    ]
                },
            ],
            print_dataSource: [],
            print_ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0
            },
            zjxm: '',
            nowDate: '',
            printObj: {
                id: 'print_table_list',
                beforeOpenCallback(vue) {
                    document.getElementById('print_table_list').style.display = 'none';
                    console.log('打开之前')
                },
                openCallback(vue) {
                    console.log('执行了打印')
                },
                closeCallback(vue) {
                    document.getElementById('print_table_list').style.display = 'none';
                    console.log('关闭了打印工具')
                }
            }
        }
    },
    created() {
        this.$set(this.dictOptions, 'isValid', [{ text: '是', value: 'Y' }, { text: '否', value: 'N' }])
        this.getSuperFieldList();
        this.getsysCxjFlCxjsbList();
        this.getcxjfs_fzlist();
        this.loadData();
    },
    computed: {
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
        },
    },
    methods: {
        moment,
        // 评分预览
        ratingPreview(data) {
            this.pafParams = {
                fzid: data.cxj_fs_fz_id,
                zjid: data.sys_zj_id,
                shijian: data.shijian
            }
            this.showpdf = !this.showpdf
        },
        // 获取成果类别
        getsysCxjFlCxjsbList() {
            sysCxjFlCxjsbList(null).then(res => {
                if (res.success) {
                    this.cxjSbList = res.result;
                }
            })
        },
        getcxjfs_fzlist(flid) {
            getAction(this.url.cxjfs_fzlist, { flid: flid }).then((res) => {
                if (res.success) {
                    this.fsfzlist = res.result.records || res.result;
                }
            })
        },
        handleSelectFz(value) {
            this.getcxjfs_fzlist(value);
        },
        printlist(record) {
            this.zjxm = record.zj_xm;
            this.nowDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
            cxjfsFspfListZjZg(qs.stringify({
                'fzid': record.cxj_fs_fz_id,
                'zjid': record.sys_zj_id,
                'shijian': record.shijian
            })).then(res => {
                if (res.success) {
                    document.getElementById('print_table_list').style.display = 'block';
                    this.print_dataSource = res.result.records || res.result;
                    document.getElementById('printbtn').click();
                    if (res.result.total) {
                        this.print_ipagination.total = res.result.total;
                    } else {
                        this.print_ipagination.total = 0;
                    }
                }
                if (res.code === 510) {
                    this.$message.warning(res.message)
                }
            })
        },
        /* 获取列表固定格式开始 */
        getQueryField() {
            //TODO 字段权限控制
            var str = "id,";
            this.columns.forEach(function (value) {
                str += "," + value.dataIndex;
            });
            return str;
        },
        // 获取分组项目
        loadData(arg) {
            if (!this.url.list) {
                this.$message.error("请设置url.list属性!")
                return
            }
            //加载数据 若传入参数1则加载第一页的内容
            if (arg === 1) {
                this.ipagination.current = 1;
            }
            var params = this.getQueryParams();//查询条件
            this.loading = true;
            // 分组id
            getAction(this.url.list, params).then((res) => {
                if (res.success) {
                    //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
                    this.dataSource = res.result.records || res.result;
                    if (res.result.total) {
                        this.ipagination.total = res.result.total;
                    } else {
                        this.ipagination.total = 0;
                    }
                    //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
                }
                if (res.code === 510) {
                    this.$message.warning(res.message)
                }
                this.loading = false;
            })
        },
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectionRows;
        },
        onClearSelected() {
            this.selectedRowKeys = [];
            this.selectionRows = [];
        },
        modalFormOk() {
            // 新增/修改 成功时，重载列表
            this.loadData();
            //清空列表选中
            this.onClearSelected()
        },
        handleTableChange(pagination, filters, sorter) {
            //分页、排序、筛选变化时触发
            //TODO 筛选
            if (Object.keys(sorter).length > 0) {
                this.isorter.column = sorter.field;
                this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
            }
            this.ipagination = pagination;
            this.loadData();
        },

        getQueryParams() {
            //获取查询条件
            let sqp = {}
            if (this.superQueryParams) {
                sqp['superQueryParams'] = encodeURI(this.superQueryParams)
                sqp['superQueryMatchType'] = this.superQueryMatchType
            }
            this.queryParam.sbnd = this.sbnd;
            var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);
            param.field = this.getQueryField();
            param.pageNo = this.ipagination.current;
            param.pageSize = this.ipagination.pageSize;
            return filterObj(param);
        },
        handleAdd: function () {
            this.$refs.modalForm.add();
            this.$refs.modalForm.title = "新增";
            this.$refs.modalForm.disableSubmit = false;
        },
        handleEdit: function (record) {
            this.$refs.modalForm.edit(record);
            this.$refs.modalForm.title = "编辑";
            this.$refs.modalForm.disableSubmit = false;
        },
        searchQuery() {
            this.loadData(1);
        },
        searchReset() {
            this.queryParam = {};
            // this.flid = "";
            this.sbnd = moment(new Date()).format('YYYY');
            this.queryParam.sbnd = this.sbnd;
            this.getcxjfs_fzlist();
            this.loadData(1);
        },
        /* 获取列表固定格式结束 */
        /* 年份控制开始 */
        openChangeOne(status) {
            //status是打开或关闭的状态
            if (status) {
                this.yearShowOne = true;
            }
        },
        // 得到年份选择器的值
        panelChangeOne(value) {
            // params.sbnd = value;
            this.sbnd = moment(value).format('YYYY');
            this.queryParam.sbnd = this.sbnd;
            this.yearShowOne = false
        },
        getSuperFieldList() {
            let fieldList = [];
            fieldList.push({ type: 'string', value: 'cxjJscsFzId', text: '技术初审分组ID', dictCode: '' })
            fieldList.push({ type: 'string', value: 'cxjCxjId', text: '项目ID', dictCode: '' })
            fieldList.push({ type: 'string', value: 'shijian', text: '年度', dictCode: '' })
            fieldList.push({ type: 'string', value: 'bz1', text: '备注1', dictCode: '' })
            fieldList.push({ type: 'string', value: 'bz2', text: '备注2', dictCode: '' })
            fieldList.push({ type: 'switch', value: 'isValid', text: '是否有效' })
            this.superFieldList = fieldList
        }
    }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

@page {
    size: auto A4 landscape;
    margin: 3mm;
}
</style>
<style scoped lang="less">
@import '~@assets/less/common.less';

@page {
    size: auto A4 landscape;
    margin: 3mm;
}

#print_table_list {
    display: none;

    /deep/ * {
        font-size: 12px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    /deep/.ant-table-tbody>tr>td {
        word-break: break-all;
        white-space: normal;
        word-wrap: break-word;
        font-size: 12px;
        padding: 6px 3px !important;
    }

    /deep/.ant-table-tbody>tr>td>div {
        font-size: 12px;
    }

    /deep/.ant-table-thead>tr>th {
        word-break: break-all;
        white-space: normal;
        word-wrap: break-word;
        text-align: center;
        font-size: 12px;
        padding: 5px 3px !important;
    }

    .editable-row-operations a {
        margin-right: 8px;
    }

    .tjdata {

        // margin-top: 20px;
        span {
            margin-right: 20px;
            line-height: 30px;
            font-size: 16px;
        }
    }

    .count {
        color: #ee9900;
        font-weight: 700;
        font-size: 16px;
    }

    /deep/.ant-table-tbody>tr>td:nth-child(16) {
        color: #ee9900 !important;
        font-weight: 700;
        font-size: 16px;
    }

    .editable-row-operations a {
        margin: 0px 2px;
    }

    .table-page-search-wrapper .anty-form-btn .ant-form-item {
        margin-bottom: 10px;
    }
}
</style>